import * as React from 'react'
import { Input, InputRef } from 'antd'

export interface Props {
    value?: string[]
    onChange?: (value?: string[]) => void
}
export default (props: Props) => {
    const { onChange } = props
    const [v0 = '', v1 = ''] = props.value || ['', '']
    const r0 = React.useRef<InputRef>()
    const r1 = React.useRef<InputRef>()

    React.useEffect(function () {
        if (r0.current.input) r0.current.input.value = (v0)
        if (r1.current.input) r1.current.input.value = (v1)
    }, [props.value])

    return <Input.Group>
        <Input style={{ width: 100, textAlign: 'center' }} placeholder="最小值" ref={r0} onBlur={(e) => onChange([e.target.value, v1])}/>
        <Input
            style={{
                width: 30,
                borderLeft: 0,
                borderRight: 0,
                pointerEvents: 'none',
                background: '#fff',
            }}
            placeholder="~"
            disabled
        />
        <Input style={{ width: 100, textAlign: 'center' }} placeholder="最大值" ref={r1} onBlur={(e) => onChange([v0, e.target.value])}/>

    </Input.Group>
}